Trò chơi trí óc trong JavaScript
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title>Size Counts | BrainStorm</title>
6 <link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
7 <link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
8 <link rel="stylesheet" href="game-css.css" type="text/css">
9 <link rel="stylesheet" href="../Alert/alertcss.css">
10 <script src="games-js.js" type="text/javascript"></script>
11 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.js"></script>
12 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-cookie/1.4.1/jquery.cookie.js"></script>
13
14 <script type="text/javascript">
15 var i = 1;
16 var q1 = 1;
17 var q2 = 2;
18 var randomNum = 0;
19 var count = 0;
20 var img_value = [-1, 1, 0, 1, -1, 0, -1, 1, 1, 1, -1, 0, 1, 1, -1, 0, -1, -1, 1, 0]; //Answer array.
21 //Function for checking answer and generating new question image.
22 //Here argument -1 for upper image or 0 for equal or 1 for bottom image.
23 function checker(check) {
24 //max 20 question. i.e i<=20
25 if (i <= 20) {
26 if (check === img_value[randomNum]) { //verifying answer with array.
27 //score counting.
28 if (count > 750){count = count + 150;}
29 else if (count > 350 && count < 750){count = count + 100;}
30 else {count = count + 50;}
31
32 //If answer is correct the green tick mark will be blinked.
33 document.getElementById('flip-img').classList.add("on");
34 document.getElementById('correct').classList.add("on");
35 setTimeout(function(){
36 document.getElementById('correct').classList.remove("on");
37 document.getElementById('flip-img').classList.remove("on");
38 }, 200);
39 }
40 else {
41 // If answer is wrong the red cross will blink.
42 document.getElementById('flip-img').classList.add("on");
43 document.getElementById('wrong').classList.add("on");
44 setTimeout(function(){
45 document.getElementById('wrong').classList.remove("on");
46 document.getElementById('flip-img').classList.remove("on");
47 }, 200);
48 }
49 i++; //increment the question count.
50
51 randomNum = getRandomInt(0,19); //generation random number for selecting next question.
52
53 //changing the quetion image according to random number generated and changing the score as per the previous answer.
54 if (i <= 20) {
55 q1 = (2 * randomNum) + 1; //for odd numbered image.
56 q2 = (2 * randomNum) + 2; //for even numbered image.
57 document.getElementById('score').innerHTML = "" + count;
58 document.getElementById('score1').innerHTML = "" + count;
59 document.getElementById('scoreDB').value = count;
60 document.getElementById('image1').src = "size-counts-img/Picture" + q1 + ".png";
61 document.getElementById('image2').src = "size-counts-img/Picture" + q2 + ".png";
62 }
63 }
64
65 //Score card at the end of game.
66 if (i == 21) {
67 document.getElementById('score1').innerHTML = "" + count;
68 document.getElementById('scoreDB').value = count;
69 document.getElementById('main-screen').style.display = "none";
70 document.getElementById('end-screen').classList.add("on");
71
72 //checking for new best score of the game.
73 var score = 0;
74 if (score <= count){
75 document.getElementById('best-score').classList.add("on");
76 }
77 }
78 }
79
80 //If user leave the game in between then socre is 0.
81 function end_screen() {
82 document.getElementById('score1').innerHTML = "000";
83 }
84 </script>
85
86 <script type="text/javascript">
87 $(document).ready(function(){
88 var lastScore = $.cookie("sizeCount");
89 $("#lastScore").text(lastScore);
90
91 var per = $.cookie("probsol");
92 $("#per").text(per);
93 });
94 </script>
95
96 </head>
97 <body style="background-color: #004d40">
98
99 <div id="start-screen">
100 <div class="row">
101 <div class="col half-wider"><h1>Size Counts <span class="info">(PROBLEM SOLVING)</span></h1></div>
102 <div class="col half-narrow">
103 <a id="ON" class="btn-circle hoverable" onclick="video_on()"><i class="material-icons"></i></a>
104 <a id="OFF" class="btn-circle hoverable off" onclick="video_off()"><i class="material-icons"></i></a>
105 </div>
106 </div>
107
108 <video id="video" width="500" height="415" controls>
109 <source src="true-color-img/Rec.mp4" type="video/mp4">
110 </video>
111
112 <div id="info" class="card">
113 <div class="row">
114 <div class="col half">
115 <span class="material-icons blue-text"></span>
116 <span id="lastScore" class="num">7777</span>
117 <span class="info black-text">LAST SCORE</span>
118 </div>
119 <div class="col half">
120 <span class="material-icons blue-text"></span>
121 <span id="per" class="num">50%</span>
122 <span class="info black-text">PROBLEM SOLVING</span>
123 </div>
124 </div>
125 <div class="divider"></div>
126
127 <div class="row black-text left-align">
128 <span class="num"> GAME BENEFIT :</span>
129 <ul>
130 <li>Challenges your ability to perform basic calculations.</li>
131 <li>Challenges your estimation and number conversion skills.</li>
132 </ul>
133 </div>
134
135 <div class="row black-text left-align">
136 <span class="num"> Instructions <span class="info black-text">(click on info button for video)</span> :</span>
137 <ol>
138 <li>Determine which card is larger and tap on it.</li>
139 <li>If both cards are equal, tap the Equal button.</li>
140 </ol>
141 </div>
142
143 </div>
144
145 <a id="button-start" class="btn start hoverable">PLAY GAME</a>
146 </div>
147
148 <div id="main-screen" class="off">
149 <div class="row">
150 <span class="timer">
151 <a id="button-stop" class="btn pause left material-icons"></a>
152 <a id="button-play" class="btn pause left material-icons off"></a>
153 00:<span id="seconds">59</span>
154 <a id="score" class="btn score right">000</a>
155 </span>
156 </div>
157
158 <div id="wait-screen" class="card waiting">
159 <div class="waring">
160 <span class="waring-i"></span>
161 <span class="waring-dot"></span>
162 </div>
163 <h1 class="black-text">Are you sure to exit?</h1>
164 <span class="num black-text">You will not able to record your score!</span>
165 <div class="row" style="margin-top: 40px">
166 <a id="button-no" class="btn green">No</a>
167 <a class="btn red" onclick="end_screen(); flip_endCard();">Yes</a>
168 </div>
169 </div>
170
171 <div id="flip-img" class="card waiting transparent">
172 <a id="correct" class="btn-circle check green"><i class="material-icons"></i></a>
173 <a id="wrong" class="btn-circle check red"><i class="material-icons"></i></a>
174 </div>
175
176 <div class="center-align">
177 <img id="image1" class="sc-img" src="size-counts-img/Picture1.png" onclick="checker(-1)">
178 <img id="image" class="sc-img sc-equal" src="size-counts-img/equal.png" onclick="checker(0)">
179 <img id="image2" class="sc-img" src="size-counts-img/Picture2.png" onclick="checker(1)">
180 </div>
181
182 <br/>
183 <div class="center-align">
184 <a class="btn btn-info">which one is larger?</a>
185 </div>
186
187 </div>
188
189 <div id="end-screen" class="off">
190 <div class="card">
191 <div class="row">
192 <span id="best-score" class="num green-text off">BEST NEW SCORE</span>
193 <span class="material-icons blue-text"></span>
194 <h1 class="black-text" id="score1" style="margin: 0">000</h1>
195 <span class="info black-text">YOUR SCORE</span>
196 <div class="divider"></div>
197
198 <div class="card bg-green">
199 <div class="row left-align">
200 <span class="num white-text">SUCCESS RATE :</span>
201 <ul><span class="info">Your success rate is 72%. Well done!
202 Only 18% of the users at this rank do this well.</span></ul>
203 </div>
204 </div>
205
206 <div class="divider"></div>
207 </div>
208 <div class="row">
209 <form action="../gameScore" method="post">
210 <input name="gameId" type="hidden" value="sizecount">
211 <input name="score" id="scoreDB" type="hidden" value="0">
212 <input class="btn continue hoverable" type="submit" value="Continue"></input>
213 </form>
214 </div>
215 </div>
216 </div>
217
218 </body>
219 </html>
